<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head th:replace="_header_include::frag(~{::title},~{::style},~{})">
    <title>我的客户</title>
    <style>
        button a{color:#fff!important;}
        .el-input{
            width: 90%;
        }
        .borderboxInfo .el-row{font-size: 14px;}
        .borderboxInfo .el-row .el-col{margin-bottom: 10px;width: 357px;}
        .borderboxInfo .el-row .el-col span:first-child{width:110px;text-align: right;float: left;}
    </style>
</head>
<body>
<div id="editSignAndFile" class="editSignAndFile mainPadding" style="display: none;">
    <el-breadcrumb separator="/" class="elBreadcrumb marginB20">
        <el-breadcrumb-item>Home</el-breadcrumb-item>
        <el-breadcrumb-item>电销管理</el-breadcrumb-item>
        <el-breadcrumb-item v-if="type ==2">客户管理</el-breadcrumb-item>
        <el-breadcrumb-item v-else>我的客户</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="mainSearchBg">
        <div class="fs14 marginB10">维护签约单基本信息</div>
        <div class="borderbox padding20 marginB20 borderboxInfo">
            <el-row>
                <el-col>
                    <span>签约单编号：</span><span>{{signOrderBaseInfo[0].signNo}}</span>
                </el-col>
                <el-col>
                    <span>客户姓名：</span><span>{{signOrderBaseInfo[0].customerName}}</span>
                </el-col>
                <el-col>
                    <span>客户身份证号：</span><span>{{signOrderBaseInfo[0].idCard}}</span>
                </el-col>
                <el-col>
                    <span>客户联系电话：</span><span>{{signOrderBaseInfo[0].phone}}</span>
                </el-col>
                <el-col>
                    <span>签约餐饮公司：</span><span>{{signOrderBaseInfo[0].signCompanyName}}</span>
                </el-col>
                <el-col>
                    <span>签约项目：</span><span>{{signOrderBaseInfo[0].signProjectName}}</span>
                </el-col>
                <el-col>
                    <span>签约省份：</span><span>{{signOrderBaseInfo[0].signProvince}}</span>
                </el-col>
                <el-col>
                    <span>签约城市：</span><span>{{signOrderBaseInfo[0].signCity}}</span>
                </el-col>
                <el-col>
                    <span>签约区／县：</span><span>{{signOrderBaseInfo[0].signDictrict}}</span>
                </el-col>
                <el-col>
                    <span>签约店型：</span><span>{{signOrderBaseInfo[0].signShopTypeName}}</span>
                </el-col>
                <el-col>
                    <span>合同应收金额：</span><span>{{signOrderBaseInfo[0].amountReceivable}}</span>
                </el-col>
                <el-col>
                    <span>签约类型：</span>
                    <span>{{this.formatTypeFn(signOrderBaseInfo[0].signType)}}</span>
                </el-col>
                <el-col>
                    <span>是否远程签约：</span>
                    <span>{{this.formatRemoteFn(signOrderBaseInfo[0].isRemoteSign)}}</span>
                </el-col>
            </el-row>
        </div>
        <el-form :model="signAddressForm"  ref="signAddressForm" >
            <el-form-item label="签约地址："  prop="signAddress">
                <el-input type="textarea"  maxlength="1000" v-model="signAddressForm.signAddress"  class="marginB20" style="width:80%;"></el-input>
            </el-form-item>
        </el-form>
        <div class="marginB20 fs16 paddingT20">上传资料</div>
        <el-row class="marginB10">
            <el-col :span="8">
                <el-button size="small" type="danger" @click="deteleClueFile">删除</el-button>
                <el-button type="text" disabled>只允许上传图片／音频文件，支持格式：jpg,png,jpeg,gif,bmp,mp3,mp4,wav,wma,3gpp,m4a,midi。不允许超过500MB。</el-button>
            </el-col>
            <el-col :span="4" class="f-fr">
                <form name=theform v-show="false">
                    <input type="radio" name="myradio" value="local_name" checked=true/>上传文件名字保持本地文件名字 <input
                        type="radio" name="myradio" value="random_name"/>上传文件名字是随机文件名 <br/>上传到指定目录:<input
                        type="text" id='dirname' placeholder="如果不填，默认是上传到根目录" size=50>
                </form>
                <div id="container" style="text-align:right;">
                    <!-- 原来upload单个上传 -->
                    <a id="selectfiles" href="javascript:void(0);" class='btn' style="display: none;">选择文件</a>
                    <a id="postfiles" href="javascript:void(0);" onclick="clueUploadFile()" class='btn' style="display: none;">开始上传</a>
                    <!-- element ui upload -->
                    <el-upload
                        class="upload-demo"
                        :action="uploadOssHost"
                        ref="refundApplyImgUpload"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :on-success="handleSuccess"
                        :on-error="handleError"
                        :before-upload="handleBefore"
                        accept=".jpg,.png,.jpeg,.gif,.bmp,.mp3,.mp4,.wav,.wma,.3gpp,.m4a,.ape,.midi,.amr,.MP3,.MP4,.WAV,.WMA,.3GPP,.M4A,.APE,.MIDI,.AMR"
                        multiple
                        :data="uploadParamData"
                        :limit='3'
                        :on-change="selectFile"
                        :on-exceed="handleExceed"
                        :auto-upload="false"
                        :file-list="fileList">
                        <el-button slot="trigger" size="small" type="primary">选择文件</el-button>
                        <span  v-show="showUploadButton">
                            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">开始上传</el-button>
                        </span>
                    </el-upload>
                </div>
                <div id="ossfile">你的浏览器不支持flash,Silverlight或者HTML5！</div>
                <span v-show="false">上传到指定目录:<input type="text" id='dirname' placeholder="如果不填，默认是上传到根目录" size=50><pre
                        id="console"></pre></span>
            </el-col>
        </el-row>
        <el-row>
            <el-table ref="multipleTable" :data="tableDataC1"
                      tooltip-effect="dark" style="width: 100%"
                      border
                      @selection-change="handleFileSelectionChange">
                <el-table-column type="selection" prop="id" width="55" @selection-change="handleFileSelectionChange"
                                 align="center">
                </el-table-column>
                <el-table-column prop="uploadUserName" label="上传人姓名" align="center">
                </el-table-column>
                <el-table-column prop="uploadTime" label="上传时间" align="center">
                </el-table-column>
                <el-table-column prop="fileName" label="文件名称" align="center">
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" @click="handleOperateFn(scope.$index, scope.row)">
                            {{scope.row.fileType !=="jpg" && scope.row.fileType !=="png" && scope.row.fileType !=="jpeg" && scope.row.fileType !=="gif" && scope.row.fileType !=="bmp"? '下载录音':'查看图片'}}
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="delStatus" label="删除状态" align="center">
                    <template slot-scope="scope">
                        <div v-if="scope.row.delStatus === 0">未删除</div>
                        <div v-else-if="scope.row.delStatus ===1" class="redcolor">已删除</div>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
    </div>
    <div  class="padding20 f-tac">
        <el-button type="primary" :disabled="saveDisabled" @click="submitForm('signAddressForm')">保存资料</el-button>
        <el-button type="primary" @click="goback()">取消</el-button>
    </div>
    <!-- 上传资源dialog -->
    <el-dialog title="查看图片" :visible.sync="dialogFormUploadImg" width="1100px">
        <div class="padding20" style="text-align: center;">
            <img :src="dialogFormUploadImgSrc" alt="" max-width="1000px">
        </div>
    </el-dialog>
</div>

<!-- import common js-->
<div th:include="_footer_include :: #jsLib"></div>
<script src="/js/common/download.js"></script>
<script th:src="@{/js/custom/callrecord/download.js?v=1.0.0}"></script>
<script th:inline="javascript">
    var type = [[${type}]];
    var clueId = [[${clueId}]];
    var signId = [[${signId}]];
    var signData = [[${signData}]];
    var clueFileList = [[${clueFileList}]];//上传文件
    var ossUrl = [[${ossUrl}]];//上传文件地
    var randomNameMap = new Map();
    var uploadNum = 0;
    // 查询 模块
    var mainDivVM = new Vue({
        el: '#editSignAndFile',
        data: {
            multipleFileSelection: [],
            showUploadButton:false,
            signOrderBaseInfo: signData,//签约单基本信息
            tableDataC1: clueFileList,//文件记录
            type: type,
            saveDisabled: false,
            dialogFormUploadImg: false, //上传资源图片弹框
            dialogFormUploadImgSrc: '', //上传资源图片弹框
            signAddressForm: {
                signAddress: ''
            },
            uploadOssHost:'',
            uploadParamData: {
                key:'22',
                policy:'',
                OSSAccessKeyId:'',
                success_action_status : '200', //让服务端返回200,不然，默认会返回204
                signature:'', 
                'x:params':'',
                'realName':''
             },
             fileList:[],
             limit:3,
             ossUrl:ossUrl,
        },
        methods: {
            formatTypeFn(value) {//
                if (value == "1") {
                    value = "一次性全款"
                } else if (value == "2") {
                    value = "先交定金"
                }
                return value;
            },
            formatRemoteFn(value) {//
                if (value == "0") {
                    value = "否"
                } else if (value == "1") {
                    value = "是"
                }
                return value;
            },
            submitForm(form) {
                var param = {};
                param.signId = signId;
                param.signAddress = mainDivVM.signAddressForm.signAddress;
                axios.post('/businesssign/updateSignAddress', param)
                    .then(function (response) {
                        var result = response.data;
                        if (result.code == "0") {
                            mainDivVM.$message({
                                message: '操作成功', type: 'success', duration: 2000, onClose: function () {
                                    window.location.href = '/businesssign/visitRecordPage?readyOnly=1&showSignButton=1&clueId='+clueId+'&signId='+signId+"&type=2";
                                }
                            });
                        } else {
                            this.saveDisabled = false;
                        }
                    });
            },
            handleOperateFn(index, row) { //上传资源"查看图片,下载录音"

                if (row.fileType == 'mp3'|| row.fileType == 'mp4' || row.fileType == 'wav' || row.fileType == 'wma'|| row.fileType == '3gpp' || row.fileType == 'm4a' ||row.fileType == 'ape'|| row.fileType == 'midi' || row.fileType == 'amr'|| row.fileType == 'MP3'|| row.fileType == 'MP4' ||row.fileType == 'WAV' || row.fileType == 'WMA'|| row.fileType == '3GPP' || row.fileType == 'M4A' ||row.fileType == 'APE'|| row.fileType == 'MIDI' || row.fileType == 'AMR') {
                    var x = new XMLHttpRequest();
                    x.open("GET", row.filePath, true);
                    x.responseType = 'blob';
                    x.onload = function (e) {
                        download(x.response, row.fileName, "audio/mp3");
                    };
                    x.send();
                } else {
                    this.dialogFormUploadImgSrc = row.filePath;
                    this.dialogFormUploadImg = true;
                }

            },
            deteleClueFile() {
                //删除上传文件
                var rows = this.multipleFileSelection;
                if (rows.length < 1) {
                    if (rows.length != 1) {
                        this.$message({message: '请选择删除数据', type: 'warning'});
                        return;
                    }
                }
                this.$confirm('确定要删除上传文件？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var ids = [];
                    for (var i = 0; i < rows.length; i++) {
                        ids.push(rows[i].id);
                    }
                    var param = {};
                    param.delIds = ids;
                    param.signId = signId;
                    axios.post('/tele/clueMyCustomerInfo/deleteClueFile', param)
                        .then(function (response) {
                            mainDivVM.$message({
                                message: '操作成功', type: 'success', duration: 2000, onClose: function () {
                                    axios.post('/businesssign/findFileBySignId', param)
                                        .then(function (response) {
                                            mainDivVM.tableDataC1 = response.data.data;
                                        });

                                }
                            });
                        });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            handleFileSelectionChange(val) {
                //上传资料
                this.multipleFileSelection = val;
            },
            goback(){window.history.go(-1);},

            selectFile(file, fileList){
                if (fileList.length > 0){
                    mainDivVM.showUploadButton = true;
                }

            },
            submitUpload(){
                //this.customUpload();
                var signUrl = this.ossUrl+"?serviceType=aggregation";
                var param={};
                axios.get(signUrl, param)
                    .then(function (response) {
                        // console.info(response);
                        var respData= response.data;
                        var host = respData.host;
                        var params={};
                        var new_multipart_params = {
                            dir:respData.dir,
                            'policy': respData.policy,
                            'OSSAccessKeyId': respData.accessid,
                            'success_action_status' : '200', //让服务端返回200,不然，默认会返回204
                            'signature': respData.signature,
                            'x:params':params,//自定义编码，basse64编码后的字符串,
                            'realName':''
                        };
                        mainDivVM.uploadParamData= new_multipart_params;
                        mainDivVM.uploadOssHost = host;
                        //同步
                        mainDivVM.$nextTick(() => {
                            //框架上传方法
                            mainDivVM.$refs.refundApplyImgUpload.submit()
                        });

                    })
                    .catch(function (error) {
                        console.log(error);
                        mainDivVM.$message.error('上传图片接口错误');
                    });

            },
            handlePreview(file){
             
            },
            handleRemove(file,fileList){
                // this.fileList=[];
            },
            contains(a, obj) {
               var i = a.length;
                   while (i--) {
                       if (a[i] === obj) {
                       return i;
                    }
                }
                return false;
            },
            handleExceed(files, fileList) {
             this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            handleSuccess(response, file, fileList) {
                debugger;
                var realName = file.name;
                var randomName = randomNameMap.get(file.uid);
                var imgUrl = mainDivVM.uploadOssHost + "/" + randomName;
                console.log(imgUrl)
                // element ui上传成功回调回显
                var param = {};
                var filePath = imgUrl + ';' + realName;
                var filePathList = new Array(filePath);
                param.signId = signId;
                param.filePathList = filePathList;
                console.log(param)
                //axios.post('/tele/clueMyCustomerInfo/uploadClueFile', param).then(function (response) {
                axios.post('/tele/clueMyCustomerInfo/batchUploadClueFile', param).then(function (response) {
                    mainDivVM.$message({
                        message: '操作成功', type: 'success', duration: 2000, onClose: function () {
                            uploadNum =uploadNum +1;
                            if (uploadNum == fileList.length){
                                axios.post('/businesssign/findFileBySignId', param)
                                    .then(function (response) {
                                        console.log(response)
                                        mainDivVM.tableDataC1 = response.data.data;
                                        mainDivVM.fileList = [];
                                        mainDivVM.showUploadButton = false;
                                        uploadNum = 0;
                                    });
                            }

                        }
                    });
                });
            },
            handleError(err, file, fileList){
                console.info(err);
                this.$message.error('上传图片出现错误');
            },
            handleBefore(file){
                console.log(file,"文件格式打印")
                var isTextComputer = file.type === 'image/bmp' ||file.type === 'audio/mp3' || file.type === 'image/png' || file.type==='image/jpeg' || file.type==='image/gif'|| file.type === 'audio/x-ms-wma'|| file.type === 'audio/mpeg'||file.type==='video/mp4'||file.type==='audio/wav'||file.type==='video/3gpp'||file.type==='audio/x-m4a'||file.type==='audio/mid';
                if(!isTextComputer){
                   this.fileList=[];
                   this.$message.error('文件格式错误');
                   return false;
                }
                if(file.size>500*1024*1024){
                   this.fileList=[];
                   this.$message.error('文件最大为500MB');
                   return false;
                }
                var randomName = mainDivVM.uploadParamData.dir + mainDivVM.random_string(10) + mainDivVM.get_suffix(file.name);
                mainDivVM.uploadParamData.key = randomName;
                mainDivVM.uploadParamData.realName = file.name;
                randomNameMap.set(file.uid,randomName)
            },
            random_string(len) {
                len = len || 32;
                var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
                var maxPos = chars.length;
                var pwd = '';
                for (i = 0; i < len; i++) {
                    pwd += chars.charAt(Math.floor(Math.random() * maxPos));
                }
                return pwd;
            },
            get_suffix(filename) {
                var pos = filename.lastIndexOf('.')
                suffix = ''
                if (pos != -1) {
                   suffix = filename.substring(pos);
                }
                return suffix;
            }
        },
        created() {
            //初始化签约单地址
            var signAddress = signData[0].signAddress;
            this.signAddressForm.signAddress =  signAddress;
        },
        mounted() {
            document.getElementById('editSignAndFile').style.display = 'block';
        }
    });
</script>
<script type="text/javascript" th:src="@{'/js/custom/file_upload/lib/crypto1/crypto/crypto.js'}"></script>
<script type="text/javascript" th:src="@{'/js/custom/file_upload/lib/crypto1/hmac/hmac.js'}"></script>
<script type="text/javascript" th:src="@{'/js/custom/file_upload/lib/crypto1/sha1/sha1.js'}"></script>
<script type="text/javascript" th:src="@{'/js/custom/file_upload/lib/base64.js'}"></script>
<script type="text/javascript" th:src="@{'/js/custom/file_upload/plupload.full.min.js'}"></script>
<script type="text/javascript" th:src="@{'/js/custom/file_upload/file_upload.js'}"></script>
<script type="text/javascript" src="//agent-gateway-2.cticloud.cn/js/agent/v10/cti-link.js"></script>
<script th:src="@{/js/custom/call/md5.js?v=1.0.0}"></script>
<script th:src="@{/js/custom/call/toolbar.js?v=1.0.1}"></script>
<script th:src="@{/js/custom/call/toolbarIframe.js?v=1.0.1}"></script>
<script th:src="@{/js/custom/call/timer.js?v=1.0.1}"></script>
<script th:src="@{/js/custom/call/rtCall.js?v=1.0.0}"></script>
<!-- 播放錄音 js -->
<script th:src="@{/js/custom/callrecord/simpleAudio02.js?v=1.0.0}"></script>
<script th:src="@{/js/custom/callrecord/download.js?v=1.0.0}"></script>
<link rel="stylesheet" href="/css/common/uploadStyle.css">
<style type="text/css">
    #ossfile {
        text-align: right;
    }
</style>
</body>
</html>